<!-- #layout name=default -->
<div id="main" class="fixed" v-cloak>
  <div class="page-header">
    <template v-if="isNewForm">
      <h1 class="title pull-left">{{ Kooboo.text.common.Form+': ' }}</h1>
      <button
        @click="formatCode"
        type="button"
        class="btn btn-default pull-right"
        >Format code</button
      >
      <kb-form
        simple
        :model="model"
        :rules="rules"
        class="col-md-3"
        ref="mainForm"
      >
        <kb-form-item
          class="row form-group"
          v-slot="error"
          prop="name"
        >
          <div
            class="input-group"
            :class="{'has-error' : !!error.error }"
            v-kb-tooltip:right.manual.error="error.error"
          >
            <input
              v-model="model.name"
              type="text"
              placeholder="Name"
              class="form-control input-large"
            />
          </div>
        </kb-form-item>
      </kb-form>
    </template>
    <template v-else>
      <h1 class="title pull-left"
        >Form<span>:</span>
        <strong :title="model.name">{{ model.name }}</strong>
      </h1>
      <button
        @click="formatCode"
        type="button"
        class="btn btn-default pull-right"
        >Format code</button
      >
    </template>
  </div>
  <div class="block-fullpage with-buttons">
    <div class="block-visual-editor default">
      <kb-code-editor
        ref="editor"
        :auto-size="true"
        :code.sync="formContent"
        lang="html"
      ></kb-code-editor>
    </div>
  </div>
  <div class="page-buttons">
    <div class="btn-group dropup">
      <button @click="onSaveAndReturn" class="btn green" style="margin:0;"
        >Save & Return</button
      >
      <a
        class="btn green dropdown-toggle"
        data-toggle="dropdown"
        style="margin:0;min-width:auto;"
        ><i class="fa fa-angle-up"></i
      ></a>
      <ul class="dropdown-menu" role="menu">
        <li><a @click="onSave" href="javascript:;">Save</a></li>
      </ul>
    </div>
    <a @click="userCancel" class="btn gray">Cancel</a>
  </div>
</div>

<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/components/kbForm.js",
      "/_Admin/Scripts/components/kb-code-editor.js"
    ]);
  })();
</script>
<script src="/_Admin/View/Development/Form.js"></script>
